<template>
  <div class="app-container">
    <div class="user-top">
      <div class="input-container">
        <span>司机账号:</span>
        <el-input v-model="pagemessage.account" size="medium" placeholder="请输入快递员账号" />
      </div>
      <div class="input-container">
        <span>司机姓名:</span>
        <el-input v-model="pagemessage.name" size="medium" placeholder="请输入快递员姓名" />
      </div>
      <div class="input-container">
        <span>司机手机号:</span>
        <el-input v-model="pagemessage.phone" size="medium" placeholder="请输入快递员手机号" />
      </div>
      <div class="container">
        <el-form style="width:350px;height:40px">
          <el-form-item label="所属机构：" style="margin-bottom:20px;font-size: 16px;font-weight: normal;" label-width="110px">
            <Treeselect
              v-model="treeData.name"
              :options="treeData"
              :normalizer="normalizer"
              :searchable="true"
              no-options-text="暂无数据"
              no-results-text="暂无数据"
              style="width:100%"
              placeholder="请选择所属地机构"
              @select="selectAgency"
            />
          </el-form-item>
        </el-form>
      </div>
      <div class="user-btn">
        <el-button class="search" type="primary" @click="search">搜索</el-button>
        <el-button class="reset" type="text" @click="reset">重置</el-button>
      </div>
    </div>
    <div class="user-bottom">
      <el-table
        :data="tableData"
        stripe
        border
        style="width: 100%"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
          :index="indexMethod"
        />
        <el-table-column
          prop="account"
          label="司机账号"
          width="200"
        />
        <el-table-column
          prop="name"
          label="司机姓名"
          width="200"
        />
        <el-table-column
          prop="mobile"
          label="司机电话"
          width="200"
        />
        <el-table-column
          prop="truck.licensePlate"
          label="关联车辆"
          width="200"
        />
        <el-table-column
          prop="agency.name"
          label="所属机构"
          width="200"
        />
        <el-table-column
          prop="workStatus"
          label="工作状态"
          width="200"
        />
        <el-table-column
          fixed="right"
          label="操作"
          width="130"
        >
          <template v-slot="{row}">
            <el-button type="text" size="small" class="work" @click="handledetail(row.userId)">查看</el-button>
            <el-button type="text" size="small" class="work" @click="handleOpenCarModal(row)">配置车辆</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagemessage.total"
        :page-size="pagemessage.pageSize"
        :current-page="pagemessage.page"
        :page-sizes="[10, 20, 30, 40, 50]"
        @current-change="changePage"
        @size-change="changePagesize"
      />
    </div>
    <template>
      <el-button type="text" :open="open" />
    </template>
    <!-- 配置车辆弹窗 -->
    <CarConfig
      ref="CarConfigModals"
      :driver-modal-info="driverModalInfo"
      :dialog-form-visible="dialogFormVisible"
      :car-list="carList"
      @newDataes="initialDate()"
    />
    <!-- driverModalInfo：row 的属性复制份-->
  </div>
</template>

<script>
import { getdriver, getOrganization, getTruckListInDriver } from '@/api/employee'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import Treeselect from '@riophae/vue-treeselect'
import CarConfig from '@/views/user/driver/components/car-config.vue'
export default {
  components: {
    Treeselect,
    CarConfig
  },
  data() {
    return {
      normalizer(node) {
        return {
          id: node.id,
          label: node.name,
          children: node.children
        }
      },
      tableData: [],
      pagemessage: {
        page: 1,
        pageSize: 10,
        total: 0,
        userId: '',
        account: '',
        agentId: '',
        name: '',
        phone: ''
      },
      treeData: [],
      open: false,
      driverModalInfo: {},
      dialogFormVisible: false,
      carList: []
    }
  },
  created() {
    this.initialDate()
  },
  methods: {
    initialDate() {
      this.getdriver()
      this.getTruckList()
      this.getOrganization()
    },
    // 获取车辆列表数据
    async getTruckList() {
      const msg = await getTruckListInDriver()
      this.carList = msg.reduce((prex, next) => {
        return [...prex, { licensePlate: next.licensePlate, id: next.id }]
      }, [])
      // this.carList = res
    },
    // 配置车辆小弹框
    handleOpenCarModal(row) {
      this.open = true
      const h = this.$createElement
      this.$msgbox({
        title: '车辆配置',
        message: h('div',
          [h('p', { style: 'margin-bottom :9px;color:#332929' }, '配置车辆需满足以下条件：'),
            h('span', { style: 'width: 16px;height: 16px;background: #FAFCFF;border: 1px solid #EBEEF5;border-radius : 50% ;display : inline-block ;text-align:center ;margin-right:6px;line-height:14px;' }, '1'),
            h('span', { style: 'color:#332929' }, '司机信息已完善'),
            h('span', { style: 'width: 16px;height: 16px;background: #FAFCFF;border: 1px solid #EBEEF5;margin-left :90px ; border-radius : 50% ;display : inline-block ;text-align:center;line-height:14px;margin-right:6px' }, '2'),
            h('span', { style: 'color:#332929;margin-right :20px ;' }, '司机已设置排班'),
            h('span', { style: 'width: 16px;height: 16px;background: #FAFCFF;border: 1px solid #EBEEF5;margin-top :10px ; border-radius : 50% ;display : inline-block ;text-align:center;line-height:14px;margin-right:6px' }, '3'),
            h('span', { style: 'color:#332929' }, '司机绑定车辆未在启用状态')]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        // type: 'warning',
        customClass: 'carmodel'
      }
      ).then(() => {
        // row 的属性复制一份给空对象，这样row的属性不会直接修改
        this.driverModalInfo = Object.assign({}, row)
        this.$refs.CarConfigModals.handleOpen()
      })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    // 搜索
    search() {
      this.pagemessage.page = 1
      this.getdriver()
    },
    // 重置
    reset() {
      this.pagemessage.account = ''
      this.pagemessage.name = ''
      this.pagemessage.phone = ''
      this.getdriver()
      this.$refs.treeselectRef.clearSingleValue()
    },
    // 路由跳转
    async handledetail(id) {
      this.$router.push({
        path: '/user/driver-detail',
        query: { id: id, formUrlName: '司机管理' }
      })
    },
    // 选择所属地机构的id值
    selectAgency(value) {
      this.pagemessage.agentId = value.id
    },
    // 获取树状机构信息
    async getOrganization() {
      const msg = await getOrganization()
      this.treeData = JSON.parse(msg)
    },
    // 获取当前页条码
    changePagesize(val) {
      this.pagemessage.pageSize = val
      this.getdriver()
    },
    // 获取当前页
    changePage(num) {
      this.pagemessage.page = num
      this.getdriver()
    },
    // 获取司机信息列表
    async getdriver() {
      const msg = await getdriver(this.pagemessage)
      this.tableData = msg.items
      this.pagemessage.total = parseInt(msg.counts)
      this.$nextTick(() => {
        this.indexMethod()
      })
    },
    // 序号 排序
    indexMethod(index) {
      // 根据当前页码和每页显示的数量计算起始序号
      const startIndex = (this.pagemessage.page - 1) * this.pagemessage.pageSize
      // 返回起始序号加上当前行的序号
      return startIndex + index + 1
    }
  }
}
</script>

<style scoped lang="scss">
.el-input--medium .el-input__inner{
  height: 45px;
}
.app-container {
  .user-top {
    background-color: #fff;
    padding: 20px 70px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .input-container {
    display: flex;
    align-items: center;
    width: calc(33.33% - 40px); /* 计算每个输入框容器的宽度 */
    margin-bottom: 10px; /* 添加下边距实现间距效果 */
    span{
      width: 160px;
    }
  }

  .container {
    margin-top: 10px;
    display: flex;
    align-items: center;
    span{
      width: 100px;
    }
  }

  .user-btn{
    margin-top: 10px;
    width: 200px;
    margin-right: 450px;
    .search{
      width: 75px;
      height: 45px;
    }
    .reset{
      width: 75px;
      height: 45px;
      border: 1px solid #e1dfdf;
    }
  }
  .user-bottom{
    margin-top: 20px;
    padding: 30px 30px 0 30px;
    background-color: #fff;
    .span-rest:before{
      width: 2px;
      height: 2px;
      background-color:#e15536;
    }
    .span-dian{
      display: inline-block;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      margin-right: 7px;
      line-height: 5px;
      background-color:#e15536;
    }
    .span-point{
      display: inline-block;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      margin-right: 7px;
      line-height: 5px;
      background-color:#1dc779;
    }
    .work{
      color: #419eff;
    }
  }
  .block{
    background-color: #fff;
    padding: 30px;
    text-align: center;
  }
}
</style>
